<template>
  <!-- 客户分配确认页面 -->
  <div class="sponsor-confirm-container">
    <div class="sponsor-confirm-title">
      <h1>主办人调配</h1>
    </div>
    <div class="choiced-sponsor">
      <span style="float: left;">
        已选客户
      </span>
    </div>

    <div class="table-list">
      <vx-table :tableData="tableData" :columns="columns">
        <template slot="operation" slot-scope="scope">
          <ui-link type="danger" :underline="false" @click="onDelete(scope)"> 删除</ui-link>
        </template>
      </vx-table>
      <ui-pagination :total="total" :page-size="pageSize" :current-page="currentPage" :layout="layout" @current-change="handleCurrentChange">
      </ui-pagination>
    </div>
    <div class="sponsor-info">
      <span style="float: left;">
        调配主办人信息
      </span>
    </div>

    <div class="sponsor-info-table">
      <vx-table :tableData="managertableData" :columns="managercolumns"></vx-table>
    </div>

    <div style="text-align: center;">
      <ui-button @click="">返回</ui-button>
      <ui-button type="primary" @click="">确认</ui-button>
    </div>
  </div>
</template>
<script>
import vxTable from '@/components/vx-table';
export default {
  components: {
    vxTable,
  },
  data() {
    return {
      total: 100,
      pageSize: 10,
      currentPage: 1,
      layout: 'total, prev, pager, next, jumper', // 分页顺序
      columns: [
        {
          prop: 'userName',
          label: '客户号',
          fixed: true,
          width: '120',
        },
        {
          prop: 'updatedBy',
          label: '客户名称',
          fixed: true,
        },
        {
          prop: 'updatedBy',
          label: '客户类型',
          fixed: true,
        },
        {
          prop: 'updatedBy',
          label: '所属机构  ',
          fixed: true,
        },
        {
          prop: 'updatedBy',
          label: '主办客户经理',
          fixed: true,
        },
        {
          prop: 'updatedBy',
          label: '客户等级',
          fixed: true,
        },
      ],
      tableData: [],
      managercolumns: [
        {
          prop: 'userName',
          label: '调配主办人名称',
          fixed: true,
          width: '120',
        },
        {
          prop: 'updatedBy',
          label: '调配主办人所属机构',
          fixed: true,
        },
        {
          prop: 'updatedBy',
          label: '调配主办人编号',
          fixed: true,
        },
      ], //表头
      managertableData: [],
    };
  },
  methods: {
    // 删除
    onDelete(item) {},
  },
};
</script>
<style lang="scss" scoped>
.sponsor-confirm-container {
  .sponsor-confirm-title,
  .choiced-sponsor,
  .sponsor-info {
    overflow: hidden;
    h1,
    span {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 20px;
    }
  }
}
</style>
